<template>
	<view class="userLayout pageBg">
			<!-- 用户信息卡片 -->
			<view class="userInfo">
				<view class="avatar">
					<image src="../../common/tabBar/xxmLogo.png" mode="aspectFill"></image>
				</view>
				<view class="ip">姓名:{{ studentInfoForm.name }}</view>
				<view class="address">单位:{{ studentInfoForm.department }}</view>
			</view>

			<!-- 个人信息卡片 -->
			<view class="section info-card">
				<view class="row" v-for="(item, index) in userDetails" :key="index">
					<view class="left">
						<view class="text-content">
							<text>{{ item.label }}：</text>
							<text v-if="item.label !== '密码'">{{ item.value }}</text>
							<text v-else>{{ showPassword ? item.value : '••••••' }}</text>
						</view>
					</view>
					<view class="ico">
						<uni-icons v-if="item.label === '密码'" :type="showPassword ? 'eye-filled' : 'eye-slash-filled'"
							size="20" color="#666" @click="togglePassword" />
						<uni-icons v-else type="right" size="15" color="#aaa" class="right-icon" />
					</view>
				</view>
			</view>

			<!-- 功能按钮区域 -->
			<view class="section action-section">
				<view class="action-grid">
				<!-- 	<view class="row action-item download">
						<view class="left">
							<uni-icons type="download-filled" size="20" color="#666" @click=""></uni-icons>
							<view class="text-content">
								<text>资料预览</text>
							</view>
						</view>
						<uni-icons type="right" size="15" color="#aaa" class="right-icon" />
					</view> -->
					<view class="row action-item evaluate">
						<view class="left">
							<uni-icons type="star-filled" size="20" color="#666"></uni-icons>
							<view class="text-content">
								<text>课程评价</text>
							</view>
						</view>
						<uni-icons type="right" size="15" color="#aaa" class="right-icon" />
					</view>
					
				</view>
			</view>

			<!-- 修改密码按钮 -->
			<view class="section">
				<button class="logout-btn" @click="revisePwd">修改密码</button>
			</view>

			<!-- 退出登录按钮 -->
			<view class="section">
				<button class="logout-btn" @click="handleLogout">退出登录</button>
			</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		computed,
		onMounted,
		ref,
		onActivated
	} from 'vue';
	import {
		apiGetScore
	} from '../../api/apis';
	import {onPullDownRefresh} from "@dcloudio/uni-app"

	const showPassword = ref(false);
	const isRefreshing = ref(false);
	const studentInfoForm = reactive({});
	const userDetails = computed(() => [{
			label: '账号',
			value: studentInfoForm.tel
		},
		{
			label: '密码',
			value: studentInfoForm.userPwd
		},
		{
			label: '班级',
			value: studentInfoForm.classs?.className
		},
		{
			label: '当前成绩',
			value: studentInfoForm.score || '暂无'
		}
	]);

	const togglePassword = () => {
		showPassword.value = !showPassword.value;
	};

	const loadUserInfo = () => {
		return new Promise((resolve) => {
			uni.getStorage({
				key: 'studentInfo',
				success: (res) => {
					Object.assign(studentInfoForm, res.data);
					const studentId = studentInfoForm.id;
					const pid = studentInfoForm.projectId;
					GetScore(studentId, pid).then(() => {
						resolve();
						
					});
				},
				fail: () => {
					resolve();
				}
			});
		});
	};
	onMounted(() => {
		loadUserInfo();
	})
    onPullDownRefresh(()=>{
			loadUserInfo();
	})

	const GetScore = async (studentId, pid) => {
		try {
			let res = await apiGetScore({
				userId: studentId,
				projectId: pid
			});
			if (res.code === 0) {
				let formattedScore = res.data.totalscore.toFixed(1);
				studentInfoForm.score = parseFloat(formattedScore);
			}
		} catch (error) {
			console.error('获取成绩失败:', error);
		}
		uni.stopPullDownRefresh();
		
	};

	const handleDownload = () => {
		uni.showToast({
			title: '正在准备下载...',
			icon: 'none'
		});
	};

	const handleEvaluate = () => {
		uni.navigateTo({
			url: '/pages/detail/detail'
		});
	};

	const handleLogout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					uni.clearStorage();
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			}
		});
	};

	const revisePwd = () => {
		uni.navigateTo({
			url: '/pages/my/revisepwd'
		});
	};
</script>

<style lang="scss">
	.userLayout {
		background-color: #f8f9fa;
		padding-top: 60rpx;

		.userInfo {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 50rpx 0;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.ip {
				font-size: 44rpx;
				color: #333;
				padding: 20rpx 0 5rpx;
			}

			.address {
				font-size: 28rpx;
				color: #aaa;
			}
		}

		.section {
			width: 90%;
			margin: 40rpx auto;
			margin-top: 60rpx;
			border-radius: 10rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
		}

		.info-card {
			.row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				height: 80rpx;
				background-color: #fff;
				border-bottom: 1px solid #eee;
				margin-bottom: 20rpx;

				.left {
					display: flex;
					align-items: center;

					.text-content {
						display: flex;
						align-items: center;

						text {
							font-size: 28rpx;
							color: #666;
						}
					}
				}

				.ico {
					.right-icon {
						margin-left: 10rpx;
					}
				}
			}
		}

		.action-section {
			.action-grid {
				.row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;
					height: 80rpx;
					background-color: #fff;
					border-bottom: 1px solid #eee;
					margin-bottom: 20rpx;

					.left {
						display: flex;
						align-items: center;
						justify-content: center;

						.text-content {
							display: flex;
							align-items: center;
							padding-left: 10rpx;

							text {
								font-size: 28rpx;
								color: #666;
							}
						}
					}

					.right-icon {
						margin-left: 10rpx;
					}
				}
			}
		}

		.logout-btn {
			background-color: #4CAF50;
			color: #fff;
			font-size: 32rpx;
			line-height: 90rpx;
			box-shadow: 0 5rpx 8rpx rgba(0, 0, 0, 0.1);

			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
			}
		}
	}
</style>